<template>
	<view class="">
		<view class="" style="display: flex;">
			<view class="">
				<u--input
					placeholder="执行人"
					border="surround"
					:fontSize="12"
					readonly
					v-model="name"
				  ></u--input>
			  </view>
			  <view><u-button :icon="isSequenceApprove?'account-fill':'plus-people-fill'" :plain="true" type="primary" @click="onChoicePerson()"></u-button></view>
		</view>
		<u-popup :show="showPopupRight" mode="right" closeable @close="closePopupRight" @open="openPopupRight" >
			<view class="" style="height: 88rpx; background-color: #ffffff; display: flex;justify-content: center;align-items: center;font-size: 14px; font-weight: 600; margin-bottom: 20rpx;">{{isSequenceApprove?"查看审批顺序人员" : "请选择审批人员"}}</view>
			<view v-if="isSequenceApprove" style="height: 88rpx; margin-bottom: 20rpx; background-color: #ffffff;text-align: center; display: flex;justify-content: center;align-items: center;font-size:12px; color: #dd6161;">注:当前节点的用户不可选择，且审批顺序不可调整，如有问题，请联系集团人力资源中心调整</view>
			<scroll-view scroll-y="true"  :style="'height:' +  screenHeight + 'px;'">
				<view style="width: 100vw;">
					<u-sticky :offset-top="0" :customNavHeight="44" style="top: 0 !important" v-if="!isSequenceApprove">
						<common-search
							class="search"
							v-model="queryParam.realname" 
							:screenShow="screenShow"
							@screenclick="screenclick"
							@searchMsg="searchMsg"
							placeholder="请输入用户姓名"
						></common-search>
					</u-sticky>
					<view class="page" :style="!isData?'display:flex;width: 100vw;height:100vh;align-items:center;justify-content: center;':''">
							<view v-if="isData">
								<view class="list" v-for="(item,index) in dataList" :key="index" @click="onChecker(item, index)">
									<view class="">
										<view class="option">
											<view class="lf">用户账号</view>
											<view class="rl">{{ item.username }}</view>
										</view>
										<view class="option">
											<view class="lf">用户姓名</view>
											<view class="rl">{{ item.realname }}</view>
										</view>
										<view class="option">
											<view class="lf">性别</view>
											<view class="rl">{{ item.sex_dictText }}</view>
										</view>
										<view class="option">
											<view class="lf">手机</view>
											<view class="rl">{{ item.phone }}</view>
										</view>
										<view class="option">
											<view class="lf">部门</view>
											<view class="rl">{{ item.orgCodeTxt }}</view>
										</view>
										
									</view>
									<view class="icon" v-show="item.isChecker"><u-icon name="checkbox-mark" color="#2979ff" size="22"></u-icon></view>
								</view>
								<!-- 加载更多显示 -->
								<view class=""><u-loadmore :status="statusLoadmore" /></view>
								<!-- #ifdef H5 -->
								<view style="height: 100px;"> </view>
								<!-- #endif -->
								<!-- #ifdef APP-PLUS -->
								<view style="height: 150px;"> </view>
								<!-- #endif -->
							</view>
							<view v-else>
								<u-empty
									mode="data"
									icon="/static/empty/data.png"
								>
								</u-empty>
							</view>
						
						<view class="btn">
							<u-button text="确定" type="primary" @click="onConfirm"></u-button>
						</view>
						
					</view>
					<u-toast ref="uToast"></u-toast>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
import CommonSearch from '@/components/CommonSearch.vue'
import {
	getBpmListByCode ,// 流程人员配置列表
	erpmngUserList,
	getUserListOrder
} from '@/api/index.js'
// import moment from 'moment'
// import {
// 	BASE_URL
// } from '@/utils/baseUrl.js'
// import { convertCurrency } from '@/utils/MoneyConvert' // 金额大写转换
export default {
	components: {
		// ProcessSelectUserPopup,
		CommonSearch
	},
	model: {
		prop: 'value',
		event: 'change',
	},
	props: {
		detail: {
			type: [Object],
			default: () => {},
		},
		// 是否多选
		multi: {
			type: [Boolean],
			default: false,
		},
		// 选中的值
		value: {
			type: [String, Number],
			default: '',
		},
		//是否顺序审批
		isSequenceApprove: {
			type: Boolean,
			default: false,
			required: false
		}
	},
	
	data() {
		return {
			name: '',
			screenHeight: 0,
			showPopupRight: false,
			showNotify: true, // 消息提示
			id: '', // 选中的id
			checkName: '', // 选中的name
			page: {
				pageNo: 1,
				pageSize: 100,
			},
			dataList: [] ,// 列表
			isData: true, // 判断是否有数据  true 代表有 false 代表无
			statusLoadmore: 'loadmore', // 通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore
			oldIndex: 0, // 存储列表之前被选中的数据
			screenShow: false, // 筛选弹窗
			
			// 传的参数
			queryParam: {
				enterpriseName: ''
			},
			
			objectField: '', // 点击确认需要修改的字段
		};
	},
	onLoad(options) {
		
	},
	watch: {
		detail: {
			handler (val) {
				if (val) {
					this.getInputList(val.execUser)
				}
			},
			immediate: true
		}
	},
	methods: {
		edit () {
			this.screenHeight = uni.getStorageSync('getSystemInfo').screenHeight
			this.page.pageNo = 1 // 页数归1
			this.dataList = [] // 清空列表
			this.geterpOmcTeamManagerList() // 获取列表
		},
		
		// 点击选择人员
		onChoicePerson () {
			this.showPopup = false
			this.showPopupRight = true
			this.screenHeight = uni.getStorageSync('getSystemInfo').screenHeight
			this.page.pageNo = 1 // 页数归1
			this.dataList = [] // 清空列表
			this.geterpOmcTeamManagerList() // 获取列表
			
		},
		
		closePopupRight () {
			this.showPopupRight = false
			this.queryParam.realname = ''
		},
		openPopupRight () {
			this.showPopupRight = true
		},
		
		// 获取表单数据
		getInputList (username) {
			var params = {
				pageNo: 1,
				pageSize: 100,
				sign: 1,
				username: username,
				
			}
			getUserListOrder(params).then(res => {
				if (res.success) {
					if (res.result.records && res.result.records.length) {
						var name = ''
						if (res.result.records.length == 1) {
							this.id = res.result.records[0].empId
							this.checkName = res.result.records[0].username
						}
						res.result.records.map((value) => {
							name += value.realname + ','
						})
						if (name) {
							name = name.substr(0, name.length - 1);
						}
						this.name = name
					}
				}
			})
		},
		
		
		geterpOmcTeamManagerList () {
			this.statusLoadmore = 'loading' // 加载中
			var params = {
				pageNo: this.page.pageNo,
				pageSize: this.page.pageSize,
				sign: 1,
				username: this.detail.execUser,
			}
			if (this.queryParam.realname) {
				params.realname = this.queryParam.realname
			}
			getUserListOrder(params).then(res => {
				if (res.success) {
					 // 判断首次加载是否有数据
					if (this.page.pageNo == 1){
						if (res.result.records&&res.result.records.length) {
							this.isData = true
						} else {
							this.isData = false
						}
					}
					if (res.result.records&&res.result.records.length){
						if (res.result.records.length >= 100 ) {
							this.statusLoadmore = 'loadmore'
						} else {
							this.statusLoadmore = 'nomore'
						}
						if (!this.isSequenceApprove) {
							// 处理数据
							var empIdArr = this.id.split(',')
							if (empIdArr.length == 1) {
								res.result.records.map((value, index) => {
									if (this.id == value.empId) {
										value.isChecker = true
										if (this.multi) {
											this.oldIndex = index // 当单选的时候
										}
									} else {
										value.isChecker = false
									}
									return value
								})
							} else {
								res.result.records.map((value, index) => {
									// 是否选中数据
									value.isChecker = false
									empIdArr.map((item,ind) => {
										if (item == value.empId) {
											value.isChecker = true
											// this.oldIndex = index // 当单选的时候
										}
									})
									
									return value
								})
							}
						}
					}else {
						this.statusLoadmore = 'nomore'
					}
					if (this.page.pageNo == 1){
						this.dataList = res.result.records
					} else {
						this.dataList = this.dataList.concat(res.result.records)
					}
					
				}
			})
		},
		
		// 点击筛选
		screenclick () {
			this.screenShow = !this.screenShow
		},
		// 输入内容
		searchMsg () {
			this.page.pageNo = 1 // 页数归1
			this.dataList = [] // 清空列表
			this.geterpOmcTeamManagerList() // 获取列表
		},
		
		// 点击选中取消选中
		onChecker(item, index) {
			if (this.isSequenceApprove) {
				return false
			}
			if (this.multi) {
				this.dataList[index].isChecker = !this.dataList[index].isChecker // 多选
				// 判断当前列表有没有选中的id值
				this.onIsChecker(this.dataList[index])
				
			} else {
				// 单选
				// 判断是否已经被选中了
				if (item.isChecker) {
					// 当已经被选中了
					this.dataList[index].isChecker = !this.dataList[index].isChecker
					this.id = ''
					this.checkName = ''
				} else {
					// 当没有被选中
					
					// 修改之前被选中的状态
					if (this.dataList[this.oldIndex].isChecker) {
						this.dataList[this.oldIndex].isChecker = false
					}
					// 修改现在的状态
					this.dataList[index].isChecker = true // 变成选中的状态
					this.oldIndex = index
					this.id = item.empId
					this.checkName = item.username
				}
			}
		},
		// 用于判断修改当前的id值
		onIsChecker(item) {
			// 判断当前值是否被选中
			if (item.isChecker) {
				// 被选中,直接拼接id值
				if (this.id) {
					this.id = this.id + ',' + item.empId
					this.checkName = this.checkName + ',' + item.username
				} else {
					this.id = item.empId
					this.checkName = item.username
				}
				
			} else {
				// 当被取消选中,则在id值中去除此id值
				
				var empIdArr = this.id.split(',')
				var nameArr = this.checkName.split(',')
				if (empIdArr.length == 1) {
					// 当id值只有一个时则直接清除
					this.id = ''
					this.checkName = ''
				} else {
					// 当id值是多个的时候
					empIdArr.map((val,ind) => {
						if (val == item.empId) {
							empIdArr.splice(ind, 1) // 删除当前的id值
							nameArr.splice(ind, 1) // 删除当前的name值
						}
					})
					this.id = empIdArr.toString()
					this.checkName = nameArr.toString()
				}
			}
		},
		
		// 点击确定
		onConfirm () {
			if (this.isSequenceApprove) {
				this.showPopupRight = false
				this.queryParam.realname = ''
				return false
			}
			var item = this.id
			if (item) {
				this.showPopupRight = false
				this.queryParam.realname = ''
				this.getInputList(this.checkName)
				this.$emit('change',this.checkName);
				
			} else {
				this.$refs.uToast.show({
					type: 'error',
					icon: 'none',
					message: '请选择数据'
				})
			}
		}
	},
	onReachBottom() {
		if (this.statusLoadmore == 'nomore') return false
		this.page.pageNo = ++ this.page.pageNo;
		this.geterpOmcTeamManagerList()
	}
};
</script>

<style lang="scss" scoped>
.pages{
	padding: 20rpx;
	width: 750rpx;
	.title{
		margin: 0;
		color: rgba(0,0,0,.85);
		font-weight: 500;
		font-size: 15px;
		word-wrap: break-word;
	}
	.title-color{
		color: #40a9ff;
		font-size: 14px;
		font-weight: 500;
		text-shadow: 0 0 .25px currentColor;
	}
}
.page {
	padding: 0 20rpx 20rpx 20rpx;
	.list{
		border-radius: 10rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
		padding: 12rpx 20rpx 20rpx 20rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
}

// 按钮
.btn{
	position: fixed;
	bottom: 20rpx;
	width: 95%;
}
</style>